<template>
  <div class="page-container">
    <!--工具栏-->
    <el-header style="height:80px;width:100%">
      <div class="toolbar" style="float:left;width:100%">
        <el-form :inline="true" :model="filters" ref="filters" :size="size">
          <el-form-item prop="start_time">
            <el-date-picker
              v-model="filters.start_time"
              type="date"
              placeholder="时间范围"
            ></el-date-picker> </el-form-item
          >至
          <el-form-item prop="end_time">
            <el-date-picker
              v-model="filters.end_time"
              type="date"
              placeholder="时间范围"
            ></el-date-picker>
          </el-form-item>
          <el-form-item prop="souerce">
            <el-select
              v-model="filters.souerce"
              style="width:200px"
              placeholder="渠道"
            >
              <el-option
                v-for="item in souerce"
                :key="item.key"
                :label="item.value"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="business_list">
            <el-select
              v-model="filters.business_list"
              style="width:200px"
              placeholder="商家"
            >
              <el-option
                v-for="item in shop_list"
                :key="item.key"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="shop_list">
            <el-select
              v-model="filters.shop_list"
              style="width:200px"
              placeholder="店铺"
            >
              <el-option
                v-for="item in shop_list"
                :key="item.key"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button-group>
              <el-button size="small">昨天</el-button>
              <el-button size="small">近7天</el-button>
              <el-button size="small">近30天</el-button>
            </el-button-group>
          </el-form-item>

          <el-row style="width:100%">
            <el-form-item>
              <kt-button
                icon="fa fa-search"
                :label="$t('action.search')"
                type="primary"
                @click="findPage(null)"
              />
            </el-form-item>
            <el-form-item>
              <kt-button
                icon="fa fa-refresh" :label="$t('action.reset')"
                type="primary"
                @click="resetForm('filters')"
              />
            </el-form-item>

            <el-form-item style="float: right;">
              <el-popover placement="bottom" trigger="click">
                <ul>
                  <li class="ul_li_style">
                    <span>成交订单金额</span>
                   
                  </li>
                  <li class="ul_li_style"><span>成交订单数</span></li>
                  <li class="ul_li_style"><span>成交转化率 </span></li>
                  <li class="ul_li_style"><span>PV</span></li>
                  <li class="ul_li_style"><span>UV</span></li>
                  <li class="ul_li_style"><span>二跳率</span></li>
                </ul>
                <el-button
                  type="primary"
                  icon="el-icon-caret-bottom"
                  slot="reference"
                  >指标</el-button
                >
              </el-popover>
            </el-form-item>
          </el-row>
        </el-form>
      </div>
    </el-header>

    <el-row style="margin-bottom: 20px;">
      <el-col :span="12" v-show="myCharts1Show">
        <div
          id="myCharts1"
          class="grid-content bg-purple"
          :style="{ width: '820px', height: '400px' }"
        ></div>
      </el-col>
      <el-col :span="12" v-show="myCharts2Show">
        <div
          id="myCharts2"
          class="grid-content bg-purple"
          :style="{ width: '820px', height: '400px' }"
        ></div>
      </el-col>
    </el-row>
    <el-row style="margin-bottom: 20px;">
      <el-col :span="12" v-show="myCharts3Show">
        <div
          id="myCharts3"
          class="grid-content bg-purple"
          :style="{ width: '820px', height: '400px' }"
        ></div>
      </el-col>
      <el-col :span="12" v-show="myCharts4Show">
        <div
          id="myCharts4"
          class="grid-content bg-purple"
          :style="{ width: '820px', height: '400px' }"
        ></div>
      </el-col>
    </el-row>
    <el-row style="margin-bottom: 20px;">
      <el-col :span="12" v-show="myCharts5Show">
        <div
          id="myCharts5"
          class="grid-content bg-purple"
          :style="{ width: '820px', height: '400px' }"
        ></div>
      </el-col>
      <el-col :span="12" v-show="myCharts6Show">
        <div
          id="myCharts6"
          class="grid-content bg-purple"
          :style="{ width: '820px', height: '400px' }"
        ></div>
      </el-col>
    </el-row>
    <el-row style="margin-bottom: 20px;">
      <el-col :span="12" v-show="myCharts7Show">
        <div
          id="myCharts7"
          class="grid-content bg-purple"
          :style="{ width: '820px', height: '400px' }"
        ></div>
      </el-col>
    </el-row>
    <div style="margin:10px;border:0;padding:0;height:500px">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="报表" name="first">
          <div style="float: left;">
            <el-button
              type="primary"
              icon="el-icon-download"
              @click="uploadTableExcel"
              >下载表格</el-button
            >
          </div>
          <div style="margin:10px;border:0;padding:0;padding-top: 60px;">
            <el-table
              :border="true"
              :data="tableData"
              style="width: 100%"
              :span-method="objectSpanMethod"
              :cell-style="setCellStyle"
            >
              <el-table-column fixed prop="date" label="商家" width="180">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    @click="isShow"
                    :icon="iconUrl"
                    v-model="scope.row.standard"
                    >全平台</el-button
                  >
                </template>
              </el-table-column>
              <el-table-column label="成交订单金额" width="450">
                <template slot-scope="scope">
                  <!--第一行-->
                  <div v-if="scope.$index == 0">
                    <div
                      class="table_div"
                      style=" width:90px; height:80px; margin-left: -10px;"
                    >
                      合计
                    </div>

                    <div
                      class="table_div"
                      style=" width:90px; height:80px;margin-left:80px;margin-top:-80px;"
                    >
                      合计1
                    </div>

                    <div
                      class="table_div"
                      style="width:90px; height:80px;margin-left: 170px;margin-top:-80px;"
                    >
                      <div class="table_div" style="width:90px; height:40px;">
                        占比
                      </div>
                      <div style="width:90px; height:40px;">
                        0.62
                      </div>
                    </div>
                    <div
                      class="table_div"
                      style="width:90px; height:80px;margin-left:260px;margin-top:-80px;"
                    >
                      <div class="table_div" style="width:90px; height:40px;">
                        环比
                      </div>
                      <div style="width:90px; height:40px;">
                        0.62
                      </div>
                    </div>
                    <div
                      class="table_div"
                      style=" width:90px; height:80px;margin-left:350px;margin-top:-80px;"
                    >
                      <div class="table_div" style="width:90px; height:40px;">
                        年同比
                      </div>
                      <div style="width:90px; height:40px;">
                        0.62
                      </div>
                    </div>
                  </div>
                  <div v-else-if="scope.$index != 0">
                    <div
                      class="table_div"
                      style=" width:90px;  height:40px; margin-left: -10px;"
                    >
                      {{ scope.row.date }}
                    </div>
                    <div
                      class="table_div"
                      style=" width:90px;  height:40px;margin-left: 80px;margin-top: -40px;"
                    >
                      0.00
                    </div>
                    <div
                      class="table_div"
                      style=" width:90px;  height:40px;margin-left: 170px;margin-top: -40px;"
                    >
                      0.00
                    </div>
                    <div
                      class="table_div"
                      style=" width:90px;  height:40px;margin-left: 260px;margin-top: -40px;"
                    >
                      0.00
                    </div>
                    <div
                      class="table_div"
                      style=" width:90px;  height:40px;margin-left: 350px;margin-top: -40px;"
                    >
                      0.00
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="客单价" width="450">
                <template slot-scope="scope">
                  <div v-if="scope.$index == 0">
                    <div
                      class="table_div"
                      style=" width:90px; height:80px; margin-left: -10px;"
                    >
                      合计
                    </div>
                    <div
                      class="table_div"
                      style=" width:90px; height:80px;margin-left:80px;margin-top:-80px;"
                    >
                      合计1
                    </div>
                    <div
                      class="table_div"
                      style="width:90px; height:80px;margin-left: 170px;margin-top:-80px;"
                    >
                      <div class="table_div" style="width:90px; height:40px;">
                        占比
                      </div>
                      <div style="width:90px; height:40px;">
                        0.62
                      </div>
                    </div>
                    <div
                      class="table_div"
                      style="width:90px; height:80px;margin-left:260px;margin-top:-80px;"
                    >
                      <div class="table_div" style="width:90px; height:40px;">
                        环比
                      </div>
                      <div style="width:90px; height:40px;">
                        0.62
                      </div>
                    </div>
                    <div
                      class="table_div"
                      style=" width:90px; height:80px;margin-left:350px;margin-top:-80px;"
                    >
                      <div class="table_div" style="width:90px; height:40px;">
                        年同比
                      </div>
                      <div style="width:90px; height:40px;">
                        0.62
                      </div>
                    </div>
                  </div>
                  <div v-else-if="scope.$index != 0">
                    <div
                      class="table_div"
                      style=" width:90px;  height:40px; margin-left: -10px;"
                    >
                      {{ scope.row.date }}
                    </div>
                    <div
                      class="table_div"
                      style=" width:90px;  height:40px;margin-left: 80px;margin-top: -40px;"
                    >
                      0.00
                    </div>
                    <div
                      class="table_div"
                      style=" width:90px;  height:40px;margin-left: 170px;margin-top: -40px;"
                    >
                      0.00
                    </div>
                    <div
                      class="table_div"
                      style=" width:90px;  height:40px;margin-left: 260px;margin-top: -40px;"
                    >
                      0.00
                    </div>
                    <div
                      class="table_div"
                      style=" width:90px;  height:40px;margin-left: 350px;margin-top: -40px;"
                    >
                      0.00
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="成交订单数" width="450">
                <template slot-scope="scope">
                  <div v-if="scope.$index == 0">
                    <div
                      class="table_div"
                      style=" width:90px; height:80px; margin-left: -10px;"
                    >
                      合计
                    </div>
                    <div
                      class="table_div"
                      style=" width:90px; height:80px;margin-left:80px;margin-top:-80px;"
                    >
                      合计1
                    </div>
                    <div
                      class="table_div"
                      style="width:90px; height:80px;margin-left: 170px;margin-top:-80px;"
                    >
                      <div class="table_div" style="width:90px; height:40px;">
                        占比
                      </div>
                      <div style="width:90px; height:40px;">
                        0.62
                      </div>
                    </div>
                    <div
                      class="table_div"
                      style="width:90px; height:80px;margin-left:260px;margin-top:-80px;"
                    >
                      <div class="table_div" style="width:90px; height:40px;">
                        环比
                      </div>
                      <div style="width:90px; height:40px;">
                        0.62
                      </div>
                    </div>
                    <div
                      class="table_div"
                      style=" width:90px; height:80px;margin-left:350px;margin-top:-80px;"
                    >
                      <div class="table_div" style="width:90px; height:40px;">
                        年同比
                      </div>
                      <div style="width:90px; height:40px;">
                        0.62
                      </div>
                    </div>
                  </div>
                  <div v-else-if="scope.$index != 0">
                    <div
                      class="table_div"
                      style=" width:90px;  height:40px; margin-left: -10px;"
                    >
                      {{ scope.row.date }}
                    </div>
                    <div
                      class="table_div"
                      style=" width:90px;  height:40px;margin-left: 80px;margin-top: -40px;"
                    >
                      0.00
                    </div>
                    <div
                      class="table_div"
                      style=" width:90px;  height:40px;margin-left: 170px;margin-top: -40px;"
                    >
                      0.00
                    </div>
                    <div
                      class="table_div"
                      style=" width:90px;  height:40px;margin-left: 260px;margin-top: -40px;"
                    >
                      0.00
                    </div>
                    <div
                      class="table_div"
                      style=" width:90px;  height:40px;margin-left: 350px;margin-top: -40px;"
                    >
                      0.00
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="成交转化率" width="450">
                <template slot-scope="scope">
                  <diV v-if="scope.$index == 0">
                    <div
                      class="table_div"
                      style=" width:90px; height:80px; margin-left: -10px;"
                    >
                      合计
                    </div>
                    <div
                      class="table_div"
                      style=" width:90px; height:80px;margin-left:80px;margin-top:-80px;"
                    >
                      合计1
                    </div>
                    <div
                      class="table_div"
                      style="width:90px; height:80px;margin-left: 170px;margin-top:-80px;"
                    >
                      <div class="table_div" style="width:90px; height:40px;">
                        占比
                      </div>
                      <div style="width:90px; height:40px;">
                        0.62
                      </div>
                    </div>
                    <div
                      class="table_div"
                      style="width:90px; height:80px;margin-left:260px;margin-top:-80px;"
                    >
                      <div class="table_div" style="width:90px; height:40px;">
                        环比
                      </div>
                      <div style="width:90px; height:40px;">
                        0.62
                      </div>
                    </div>
                    <div
                      class="table_div"
                      style=" width:90px; height:80px;margin-left:350px;margin-top:-80px;"
                    >
                      <div class="table_div" style="width:90px; height:40px;">
                        年同比
                      </div>
                      <div style="width:90px; height:40px;">
                        0.62
                      </div>
                    </div>
                  </diV>
                  <div v-else-if="scope.$index != 0">
                    <div
                      class="table_div"
                      style=" width:90px;  height:40px; margin-left: -10px;"
                    >
                      {{ scope.row.date }}
                    </div>
                    <div
                      class="table_div"
                      style=" width:90px;  height:40px;margin-left: 80px;margin-top: -40px;"
                    >
                      0.00
                    </div>
                    <div
                      class="table_div"
                      style=" width:90px;  height:40px;margin-left: 170px;margin-top: -40px;"
                    >
                      0.00
                    </div>
                    <div
                      class="table_div"
                      style=" width:90px;  height:40px;margin-left: 260px;margin-top: -40px;"
                    >
                      0.00
                    </div>
                    <div
                      class="table_div"
                      style=" width:90px;  height:40px;margin-left: 350px;margin-top: -40px;"
                    >
                      0.00
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="PV" width="450">
                <template slot-scope="scope">
                  <div v-if="scope.$index == 0">
                    <div
                      class="table_div"
                      style=" width:90px; height:80px; margin-left: -10px;"
                    >
                      合计
                    </div>
                    <div
                      class="table_div"
                      style=" width:90px; height:80px;margin-left:80px;margin-top:-80px;"
                    >
                      合计1
                    </div>
                    <div
                      class="table_div"
                      style="width:90px; height:80px;margin-left: 170px;margin-top:-80px;"
                    >
                      <div class="table_div" style="width:90px; height:40px;">
                        占比
                      </div>
                      <div style="width:90px; height:40px;">
                        0.62
                      </div>
                    </div>
                    <div
                      class="table_div"
                      style="width:90px; height:80px;margin-left:260px;margin-top:-80px;"
                    >
                      <div class="table_div" style="width:90px; height:40px;">
                        环比
                      </div>
                      <div style="width:90px; height:40px;">
                        0.62
                      </div>
                    </div>
                    <div
                      class="table_div"
                      style=" width:90px; height:80px;margin-left:350px;margin-top:-80px;"
                    >
                      <div class="table_div" style="width:90px; height:40px;">
                        年同比
                      </div>
                      <div style="width:90px; height:40px;">
                        0.62
                      </div>
                    </div>
                  </div>
                  <div v-else-if="scope.$index != 0">
                    <div
                      class="table_div"
                      style=" width:90px;  height:40px; margin-left: -10px;"
                    >
                      {{ scope.row.date }}
                    </div>
                    <div
                      class="table_div"
                      style=" width:90px;  height:40px;margin-left: 80px;margin-top: -40px;"
                    >
                      0.00
                    </div>
                    <div
                      class="table_div"
                      style=" width:90px;  height:40px;margin-left: 170px;margin-top: -40px;"
                    >
                      0.00
                    </div>
                    <div
                      class="table_div"
                      style=" width:90px;  height:40px;margin-left: 260px;margin-top: -40px;"
                    >
                      0.00
                    </div>
                    <div
                      class="table_div"
                      style=" width:90px;  height:40px;margin-left: 350px;margin-top: -40px;"
                    >
                      0.00
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="UV" width="450">
                <template slot-scope="scope">
                  <div v-if="scope.$index == 0">
                    <div
                      class="table_div"
                      style=" width:90px; height:80px; margin-left: -10px;"
                    >
                      合计
                    </div>
                    <div
                      class="table_div"
                      style=" width:90px; height:80px;margin-left:80px;margin-top:-80px;"
                    >
                      合计1
                    </div>
                    <div
                      class="table_div"
                      style="width:90px; height:80px;margin-left: 170px;margin-top:-80px;"
                    >
                      <div class="table_div" style="width:90px; height:40px;">
                        占比
                      </div>
                      <div style="width:90px; height:40px;">
                        0.62
                      </div>
                    </div>
                    <div
                      class="table_div"
                      style="width:90px; height:80px;margin-left:260px;margin-top:-80px;"
                    >
                      <div class="table_div" style="width:90px; height:40px;">
                        环比
                      </div>
                      <div style="width:90px; height:40px;">
                        0.62
                      </div>
                    </div>
                    <div
                      class="table_div"
                      style=" width:90px; height:80px;margin-left:350px;margin-top:-80px;"
                    >
                      <div class="table_div" style="width:90px; height:40px;">
                        年同比
                      </div>
                      <div style="width:90px; height:40px;">
                        0.62
                      </div>
                    </div>
                  </div>
                  <div v-else-if="scope.$index != 0">
                    <div
                      class="table_div"
                      style=" width:90px;  height:40px; margin-left: -10px;"
                    >
                      {{ scope.row.date }}
                    </div>
                    <div
                      class="table_div"
                      style=" width:90px;  height:40px;margin-left: 80px;margin-top: -40px;"
                    >
                      0.00
                    </div>
                    <div
                      class="table_div"
                      style=" width:90px;  height:40px;margin-left: 170px;margin-top: -40px;"
                    >
                      0.00
                    </div>
                    <div
                      class="table_div"
                      style=" width:90px;  height:40px;margin-left: 260px;margin-top: -40px;"
                    >
                      0.00
                    </div>
                    <div
                      class="table_div"
                      style=" width:90px;  height:40px;margin-left: 350px;margin-top: -40px;"
                    >
                      0.00
                    </div>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
        <el-tab-pane label="趋势图" name="second">
          <div style="float:left">
            <el-checkbox
              v-model="allCheckedSource"
              label="全渠道"
              @change="isChangeChecked"
              >全渠道</el-checkbox
            >
          </div>
          <div style="float:left; padding-left: 20px;">
            <el-checkbox-group
              v-model="checkedSource"
              @change="handleCheckdSourceChange"
            >
              <el-checkbox v-for="item in sources" :label="item" :key="item">{{
                item
              }}</el-checkbox>
            </el-checkbox-group>
          </div>

          <div style="padding-top: 40px;">
            <el-row>
              <el-col :span="24">
                <div class="grid-content bg-purple" style="height: 40px;">
                  <el-checkbox-group
                    v-model="checkedType"
                    style="float:left; padding-top: 10px;"
                    :max="2"
                    @change="handleCheckdSourceTypeChange"
                  >
                    <el-checkbox
                      v-for="item in type"
                      :label="item"
                      :key="item"
                      >{{ item }}</el-checkbox
                    >
                  </el-checkbox-group>
                  <div class="11111" style="float:left;padding-top: 10px;">
                    &nbsp&nbsp&nbsp&nbsp&nbsp|&nbsp&nbsp&nbsp&nbsp
                    <el-checkbox
                      :disabled="true"
                      :checked="true"
                      v-model="turnoverRate"
                      >成交转化率</el-checkbox
                    >
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>

          <div style="margin:10px;border:0;padding:0;">
            <el-row>
              <!--全渠道-->
              <div v-show="allsourceOrderMoneyShow">
                <el-col :span="4">
                  <div
                    class="grid-content bg-purple1"
                    :style="{ width: '200px', height: '100px' }"
                  >
                    <p class style="font-size: 16px;font-weight: bold;">
                      全渠道成交订单金额
                    </p>
                    <br />
                    <div style=" color: #42A5F5;">0.62</div>
                  </div>
                </el-col>
              </div>
              <div v-show="allsourceKeDanPriceShow">
                <el-col :span="4">
                  <div
                    class="grid-content bg-purple1"
                    :style="{ width: '200px', height: '100px' }"
                  >
                    <p class style="font-size: 16px;font-weight: bold;">
                      全渠道客单价
                    </p>
                    <br />
                    <div style=" color: #42A5F5;">0.62</div>
                  </div>
                </el-col>
              </div>
              <div v-show="allsourceOrderNumShow">
                <el-col :span="4">
                  <div
                    class="grid-content bg-purple1"
                    :style="{ width: '200px', height: '100px' }"
                  >
                    <p class style="font-size: 16px;font-weight: bold;">
                      全渠道成交订单数
                    </p>
                    <br />
                    <div style=" color: #42A5F5;">0.62</div>
                  </div>
                </el-col>
              </div>
              <div v-show="allsourcePvShow">
                <el-col :span="4">
                  <div
                    class="grid-content bg-purple1"
                    :style="{ width: '200px', height: '100px' }"
                  >
                    <p class style="font-size: 16px;font-weight: bold;">
                      全渠道PV
                    </p>
                    <br />
                    <div style=" color: #42A5F5;">0.62</div>
                  </div>
                </el-col>
              </div>
              <div v-show="allsourceUvShow">
                <el-col :span="4">
                  <div
                    class="grid-content bg-purple1"
                    :style="{ width: '200px', height: '100px' }"
                  >
                    <p class style="font-size: 16px;font-weight: bold;">
                      全渠道UV
                    </p>
                    <br />
                    <div style=" color: #42A5F5;">0.62</div>
                  </div>
                </el-col>
              </div>
              <!--BBC-->
              <div v-show="bbcOrderMoneyShow">
                <el-col :span="4">
                  <div
                    class="grid-content bg-purple1"
                    :style="{ width: '200px', height: '100px' }"
                  >
                    <p class style="font-size: 16px;font-weight: bold;">
                      BBC成交订单金额
                    </p>
                    <br />
                    <div style=" color: #42A5F5;">0</div>
                  </div>
                </el-col>
              </div>

              <div v-show="bbcKeDanPriceShow">
                <el-col :span="4">
                  <div
                    class="grid-content bg-purple1"
                    :style="{ width: '200px', height: '100px' }"
                  >
                    <p class style="font-size: 16px;font-weight: bold;">
                      BBC客单价
                    </p>
                    <br />
                    <div style=" color: #42A5F5;">0</div>
                  </div>
                </el-col>
              </div>
              <div v-show="bbcOrderNumShow">
                <el-col :span="4">
                  <div
                    class="grid-content bg-purple1"
                    :style="{ width: '200px', height: '100px' }"
                  >
                    <p class style="font-size: 16px;font-weight: bold;">
                      BBC成交订单数
                    </p>
                    <br />
                    <div style=" color: #42A5F5;">0</div>
                  </div>
                </el-col>
              </div>
              <div v-show="bbcPvShow">
                <el-col :span="4">
                  <div
                    class="grid-content bg-purple1"
                    :style="{ width: '200px', height: '100px' }"
                  >
                    <p class style="font-size: 16px;font-weight: bold;">
                      BBC PV
                    </p>
                    <br />
                    <div style=" color: #42A5F5;">0</div>
                  </div>
                </el-col>
              </div>
              <div v-show="bbcUvShow">
                <el-col :span="4">
                  <div
                    class="grid-content bg-purple1"
                    :style="{ width: '200px', height: '100px' }"
                  >
                    <p class style="font-size: 16px;font-weight: bold;">
                      BBC UV
                    </p>
                    <br />
                    <div style=" color: #42A5F5;">0</div>
                  </div>
                </el-col>
              </div>

              <!--天猫-->
              <div v-show="tianMaoOrderMoneyShow">
                <el-col :span="4">
                  <div
                    class="grid-content bg-purple1"
                    :style="{ width: '200px', height: '100px' }"
                  >
                    <p class style="font-size: 16px;font-weight: bold;">
                      天猫成交订单金额
                    </p>
                    <br />
                    <div style=" color: #42A5F5;">0</div>
                  </div>
                </el-col>
              </div>

              <div v-show="tianMaoKeDanPriceShow">
                <el-col :span="4">
                  <div
                    class="grid-content bg-purple1"
                    :style="{ width: '200px', height: '100px' }"
                  >
                    <p class style="font-size: 16px;font-weight: bold;">
                      天猫客单价
                    </p>
                    <br />
                    <div style=" color: #42A5F5;">0</div>
                  </div>
                </el-col>
              </div>
              <div v-show="tianMaoOrderNumShow">
                <el-col :span="4">
                  <div
                    class="grid-content bg-purple1"
                    :style="{ width: '200px', height: '100px' }"
                  >
                    <p class style="font-size: 16px;font-weight: bold;">
                      天猫成交订单数
                    </p>
                    <br />
                    <div style=" color: #42A5F5;">0</div>
                  </div>
                </el-col>
              </div>
              <div v-show="tianMaoPvShow">
                <el-col :span="4">
                  <div
                    class="grid-content bg-purple1"
                    :style="{ width: '200px', height: '100px' }"
                  >
                    <p class style="font-size: 16px;font-weight: bold;">
                      天猫 PV
                    </p>
                    <br />
                    <div style=" color: #42A5F5;">0</div>
                  </div>
                </el-col>
              </div>
              <div v-show="tianMaoUvShow">
                <el-col :span="4">
                  <div
                    class="grid-content bg-purple1"
                    :style="{ width: '200px', height: '100px' }"
                  >
                    <p class style="font-size: 16px;font-weight: bold;">
                      天猫 UV
                    </p>
                    <br />
                    <div style=" color: #42A5F5;">0</div>
                  </div>
                </el-col>
              </div>

              <!--京东-->
              <div v-show="jingDongOrderMoneyShow">
                <el-col :span="4">
                  <div
                    class="grid-content bg-purple1"
                    :style="{ width: '200px', height: '100px' }"
                  >
                    <p class style="font-size: 16px;font-weight: bold;">
                      京东成交订单金额
                    </p>
                    <br />
                    <div style=" color: #42A5F5;">0</div>
                  </div>
                </el-col>
              </div>

              <div v-show="jingDongKeDanPriceShow">
                <el-col :span="4">
                  <div
                    class="grid-content bg-purple1"
                    :style="{ width: '200px', height: '100px' }"
                  >
                    <p class style="font-size: 16px;font-weight: bold;">
                      京东客单价
                    </p>
                    <br />
                    <div style=" color: #42A5F5;">0</div>
                  </div>
                </el-col>
              </div>
              <div v-show="jingDongOrderNumShow">
                <el-col :span="4">
                  <div
                    class="grid-content bg-purple1"
                    :style="{ width: '200px', height: '100px' }"
                  >
                    <p class style="font-size: 16px;font-weight: bold;">
                      京东成交订单数
                    </p>
                    <br />
                    <div style=" color: #42A5F5;">0</div>
                  </div>
                </el-col>
              </div>
              <div v-show="jingDongPvShow">
                <el-col :span="4">
                  <div
                    class="grid-content bg-purple1"
                    :style="{ width: '200px', height: '100px' }"
                  >
                    <p class style="font-size: 16px;font-weight: bold;">
                      京东 PV
                    </p>
                    <br />
                    <div style=" color: #42A5F5;">0</div>
                  </div>
                </el-col>
              </div>
              <div v-show="jingDongUvShow">
                <el-col :span="4">
                  <div
                    class="grid-content bg-purple1"
                    :style="{ width: '200px', height: '100px' }"
                  >
                    <p class style="font-size: 16px;font-weight: bold;">
                      京东 UV
                    </p>
                    <br />
                    <div style=" color: #42A5F5;">0</div>
                  </div>
                </el-col>
              </div>
            </el-row>
          </div>
          <div style="margin:10px;border:0;padding:0;margin-left:-65px;">
            <el-row>
              <el-col :span="24">
                <div
                  id="myCharts8"
                  class="grid-content bg-purple1"
                  :style="{ width: '1680px', height: '400px' }"
                ></div>
              </el-col>
            </el-row>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import PopupTreeInput from "@/components/PopupTreeInput";
import CyTable from "@/views/Core/CyTable";
import KtButton from "@/views/Core/KtButton";
import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";
import { format } from "@/utils/datetime";
import utils from "@/assets/js/utils.js";
let echarts = require("echarts/lib/echarts");
const sourceOptions = ["BBC", "天猫", "京东"];
const typeOptions = ["成交订单金额", "客单价", "成交订单数", "PV", "UV"];
var symbolSize = 20;
var points = [];

export default {
  name: "FuncFormsBase",
  components: {
    PopupTreeInput,
    CyTable,
    KtButton,
    TableColumnFilterDialog
  },
  data() {
    return {
      myCharts7Show: false,
      myCharts6Show: true,
      myCharts5Show: true,
      myCharts4Show: true,
      myCharts3Show: true,
      myCharts2Show: true,
      myCharts1Show: true,
      jingDongOrderMoneyShow: false,
      jingDongKeDanPriceShow: false,
      jingDongOrderNumShow: false,
      jingDongPvShow: false,
      jingDongUvShow: false,
      tianMaoOrderMoneyShow: false,
      tianMaoKeDanPriceShow: false,
      tianMaoOrderNumShow: false,
      tianMaoPvShow: false,
      tianMaoUvShow: false,
      bbcOrderMoneyShow: false,
      bbcKeDanPriceShow: false,
      bbcOrderNumShow: false,
      bbcPvShow: false,
      bbcUvShow: false,
      allsourceOrderMoneyShow: true,
      allsourceKeDanPriceShow: true,
      allsourceOrderNumShow: false,
      allsourcePvShow: false,
      allsourceUvShow: false,
      isChange: true,
      imgUrl: "/static/table.png",
      checked: "",
      allsourceShow: true,
      jingdongShow: false,
      tianmaoShow: false,
      bbcShow: false,
      turnoverRate: "", //成交转化率
      checkedSource: [],
      allCheckedSource: true,
      sources: sourceOptions,
      checkedType: ["成交订单金额", "客单价"],
      type: typeOptions,
      sourceOptions: [
        { key: 0, vwlue: "BBC" },
        { key: 1, vwlue: "天猫" },
        { key: 2, vwlue: "京东" }
      ],

      iconUrl: "el-icon-plus",
      tableData: [
        {
          date: "BBC",
          name: "0.62",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333
        },
        {
          date: "BBC",
          name: "0.28",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333
        },
        {
          date: "天猫",
          name: "0.16",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333
        },
        {
          date: "京东",
          name: "0.16",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333
        }
      ],
      activeName: "first",
      souerce: [
        { key: "0", value: "BBC" },
        { key: "1", value: "天猫" },
        { key: "2", value: "京东" }
      ],
      checkSource: [
        { key: "0", value: "BBC" },
        { key: "1", value: "天猫" },
        { key: "2", value: "京东" }
      ],
      shop_list: [],
      size: "small",
      size1:"mini",
      filters: {
        souerce: "",
        start_time: "",
        end_time: "",
        shop_list: "",
        business_list: ""
      },

      dataForm: {
        tableData: [
          {
            type: "政治类",
            standard: "",
            sensitive: ""
          },

          {
            type: "侮辱性词汇",
            standard: "",
            sensitive: ""
          },

          {
            type: "其他",
            standard: "",
            sensitive: ""
          }
        ]
      }
    };
  },

  methods: {
    uploadTableExcel: function(data) {
      this.$message({ message: "下载成功", type: "success" });
    },
    handleCheckdSourceTypeChange: function(data) {
      let this_ = this;
      this_.allsourceOrderMoneyShow = false;
      this_.allsourceKeDanPriceShow = false;
      this_.allsourceOrderNumShow = false;
      this_.allsourcePvShow = false;
      this_.allsourceUvShow = false;
      if (this_.checkedSource.length == 0 && this_.allCheckedSource) {
        $.each(this_.checkedType, function(index, val) {
          if (val == "成交订单金额") {
            this_.allsourceOrderMoneyShow = true;
          }
          if (val == "客单价") {
            this_.allsourceKeDanPriceShow = true;
          }
          if (val == "成交订单数") {
            this_.allsourceOrderNumShow = true;
          }
          if (val == "PV") {
            this_.allsourcePvShow = true;
          }
          if (val == "UV") {
            this_.allsourceUvShow = true;
          }
        });
      } else {
        this_.allsourceOrderMoneyShow = false;
        this_.allsourceKeDanPriceShow = false;
        this_.allsourceOrderNumShow = false;
        this_.allsourcePvShow = false;
        this_.allsourceUvShow = false;
        this_.jingDongOrderMoneyShow = false;
        this_.jingDongKeDanPriceShow = false;
        this_.jingDongOrderNumShow = false;
        this_.jingDongPvShow = false;
        this_.jingDongUvShow = false;
        this_.tianMaoOrderMoneyShow = false;
        this_.tianMaoKeDanPriceShow = false;
        this_.tianMaoOrderNumShow = false;
        this_.tianMaoPvShow = false;
        this_.tianMaoUvShow = false;
        this_.bbcOrderMoneyShow = false;
        this_.bbcKeDanPriceShow = false;
        this_.bbcOrderNumShow = false;
        this_.bbcPvShow = false;
        this_.bbcUvShow = false;
        $.each(this.checkedSource, function(index, val) {
          if (val == "BBC") {
            $.each(this_.checkedType, function(index, val) {
              if (val == "成交订单金额") {
                this_.bbcOrderMoneyShow = true;
              }
              if (val == "客单价") {
                this_.bbcKeDanPriceShow = true;
              }
              if (val == "成交订单数") {
                this_.bbcOrderNumShow = true;
              }
              if (val == "PV") {
                this_.bbcPvShow = true;
              }
              if (val == "UV") {
                this_.bbcUvShow = true;
              }
            });
          }
          if (val == "天猫") {
            $.each(this_.checkedType, function(index, val) {
              if (val == "成交订单金额") {
                this_.tianMaoOrderMoneyShow = true;
              }
              if (val == "客单价") {
                this_.tianMaoKeDanPriceShow = true;
              }
              if (val == "成交订单数") {
                this_.tianMaoOrderNumShow = true;
              }
              if (val == "PV") {
                this_.tianMaoPvShow = true;
              }
              if (val == "UV") {
                this_.tianMaoUvShow = true;
              }
            });
          }
          if (val == "京东") {
            $.each(this_.checkedType, function(index, val) {
              if (val == "成交订单金额") {
                this_.jingDongOrderMoneyShow = true;
              }
              if (val == "客单价") {
                this_.jingDongKeDanPriceShow = true;
              }
              if (val == "成交订单数") {
                this_.jingDongOrderNumShow = true;
              }
              if (val == "PV") {
                this_.jingDongPvShow = true;
              }
              if (val == "UV") {
                this_.tianMaoUvShow = true;
              }
            });
          }
        });
      }
    },
    isChangeChecked: function(data) {
      let this_ = this;
      if (data) {
        this_.checkedSource = [];
        this_.allCheckedSource = true;
        this_.allsourceOrderMoneyShow = false;
        this_.allsourceKeDanPriceShow = false;
        this_.allsourceOrderNumShow = false;
        this_.allsourcePvShow = false;
        this_.allsourceUvShow = false;
        this_.jingDongOrderMoneyShow = false;
        this_.jingDongKeDanPriceShow = false;
        this_.jingDongOrderNumShow = false;
        this_.jingDongPvShow = false;
        this_.jingDongUvShow = false;
        this_.tianMaoOrderMoneyShow = false;
        this_.tianMaoKeDanPriceShow = false;
        this_.tianMaoOrderNumShow = false;
        this_.tianMaoPvShow = false;
        this_.tianMaoUvShow = false;
        this_.bbcOrderMoneyShow = false;
        this_.bbcKeDanPriceShow = false;
        this_.bbcOrderNumShow = false;
        this_.bbcPvShow = false;
        this_.bbcUvShow = false;
        $.each(this_.checkedType, function(index, val) {
          if (val == "成交订单金额") {
            this_.allsourceOrderMoneyShow = true;
          }
          if (val == "客单价") {
            this_.allsourceKeDanPriceShow = true;
          }
          if (val == "成交订单数") {
            this_.allsourceOrderNumShow = true;
          }
          if (val == "PV") {
            this_.allsourcePvShow = true;
          }
          if (val == "UV") {
            this_.allsourceUvShow = true;
          }
        });
      } else {
        this_.allCheckedSource = false;

        this_.allsourceOrderMoneyShow = false;
        this_.allsourceKeDanPriceShow = false;
        this_.allsourceOrderNumShow = false;
        this_.allsourcePvShow = false;
        this_.allsourceUvShow = false;
      }
    },
    handleCheckdSourceChange: function(data) {
      let this_ = this;
      this_.checkedSource = [];
      if (data.length != 0) {
        //勾选了BBC和天猫和京东其中任意
        this_.jingDongOrderMoneyShow = false;
        this_.jingDongKeDanPriceShow = false;
        this_.jingDongOrderNumShow = false;
        this_.jingDongPvShow = false;
        this_.jingDongUvShow = false;
        this_.tianMaoOrderMoneyShow = false;
        this_.tianMaoKeDanPriceShow = false;
        this_.tianMaoOrderNumShow = false;
        this_.tianMaoPvShow = false;
        this_.tianMaoUvShow = false;
        this_.bbcOrderMoneyShow = false;
        this_.bbcKeDanPriceShow = false;
        this_.bbcOrderNumShow = false;
        this_.bbcPvShow = false;
        this_.bbcUvShow = false;
        this_.allsourceOrderMoneyShow = false;
        this_.allsourceKeDanPriceShow = false;
        this_.allsourceOrderNumShow = false;
        this_.allsourcePvShow = false;
        this_.allsourceUvShow = false;
        this_.allCheckedSource = false;
        console.log(this_.allCheckedSource);
        $.each(data, function(index, val) {
          if (val == "BBC") {
            $.each(this_.checkedType, function(index, val) {
              if (val == "成交订单金额") {
                this_.bbcOrderMoneyShow = true;
              }
              if (val == "客单价") {
                this_.bbcKeDanPriceShow = true;
              }
              if (val == "成交订单数") {
                this_.bbcOrderNumShow = true;
              }
              if (val == "PV") {
                this_.bbcPvShow = true;
              }
              if (val == "UV") {
                this_.bbcUvShow = true;
              }
            });
            this_.checkedSource.push(val);
          }
          if (val == "天猫") {
            $.each(this_.checkedType, function(index, val) {
              if (val == "成交订单金额") {
                this_.tianMaoOrderMoneyShow = true;
              }
              if (val == "客单价") {
                this_.tianMaoKeDanPriceShow = true;
              }
              if (val == "成交订单数") {
                this_.tianMaoOrderNumShow = true;
              }
              if (val == "PV") {
                this_.tianMaoPvShow = true;
              }
              if (val == "UV") {
                this_.tianMaoUvShow = true;
              }
            });
            this_.checkedSource.push(val);
          }
          if (val == "京东") {
            $.each(this_.checkedType, function(index, val) {
              if (val == "成交订单金额") {
                this_.jingDongOrderMoneyShow = true;
              }
              if (val == "客单价") {
                this_.jingDongKeDanPriceShow = true;
              }
              if (val == "成交订单数") {
                this_.jingDongOrderNumShow = true;
              }
              if (val == "PV") {
                this_.jingDongPvShow = true;
              }
              if (val == "UV") {
                this_.tianMaoUvShow = true;
              }
            });
            this_.checkedSource.push(val);
          }
        });
      } else {
        this_.jingDongOrderMoneyShow = false;
        this_.jingDongKeDanPriceShow = false;
        this_.jingDongOrderNumShow = false;
        this_.jingDongPvShow = false;
        this_.jingDongUvShow = false;
        this_.tianMaoOrderMoneyShow = false;
        this_.tianMaoKeDanPriceShow = false;
        this_.tianMaoOrderNumShow = false;
        this_.tianMaoPvShow = false;
        this_.tianMaoUvShow = false;
        this_.bbcOrderMoneyShow = false;
        this_.bbcKeDanPriceShow = false;
        this_.bbcOrderNumShow = false;
        this_.bbcPvShow = false;
        this_.bbcUvShow = false;
      }
    },
    objectSpanMethod: function(data) {
      if (data.columnIndex === 0) {
        if (data.rowIndex === 0) {
          return {
            rowspan: 5,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
    },
    isShow: function() {
      if (this.iconUrl == "el-icon-plus") {
        this.iconUrl = "el-icon-minus";
      } else {
        this.iconUrl = "el-icon-plus";
      }
    },
    handleClick: function(data) {},
    // 获取分页数据
    findPage: function(data) {},
    // 门店状态初始化
    queryUserList() {
      var that = this;
      this.utils.request.queryUserList({ t: "shop" }, function(data) {
        that.shop_list = data.data;
      });
    },
    //重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    setCellStyle: function({ row, column, rowIndex, columnIndex }) {
      if (rowIndex == 0) {
        return "padding:0;height:80px; ";
      } else {
        return "padding:0;height:40px;";
      }
    },
    handleAdd: function() {
      this.$message({ message: "操作成功", type: "success" });
    },
    drawBar() {
      // 基于dom，初始化echarts实例
      let myCharts1 = echarts.init(document.getElementById("myCharts1")); //成交订单金额
      let myCharts2 = echarts.init(document.getElementById("myCharts2")); //客单价
      let myCharts3 = echarts.init(document.getElementById("myCharts3")); //成交订单数
      let myCharts4 = echarts.init(document.getElementById("myCharts4")); //成交转化率
      let myCharts5 = echarts.init(document.getElementById("myCharts5")); //PV
      let myCharts6 = echarts.init(document.getElementById("myCharts6")); //UV
      let myCharts7 = echarts.init(document.getElementById("myCharts7")); //二跳率
      let myCharts8 = echarts.init(document.getElementById("myCharts8")); //趋势图

      //成交订单金额
      myCharts1.setOption({
        title: {
          text: "成交订单金额 3",
          left: "center"
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          x: "left",
          data: ["BBC", "天猫", "京东"]
        },
        series: [
          {
            type: "pie",
            radius: "65%",
            center: ["50%", "50%"],
            selectedMode: "single",
            data: [
              {
                label: {
                  normal: {
                    backgroundColor: "#eee",
                    borderColor: "#777",
                    borderWidth: 1,
                    borderRadius: 4,
                    rich: {
                      title: {
                        color: "#eee",
                        align: "center"
                      }
                    }
                  }
                }
              },
              { value: 535, name: "BBC" },
              { value: 510, name: "天猫" },
              { value: 634, name: "京东" }
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      });
      // 二跳率
      myCharts7.setOption({
        title: {
          text: "二跳率49.73%",
          left: "center"
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },

        series: [
          {
            name: "占比",
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: "center"
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: "20",
                  fontWeight: "bold"
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [
              { value: 335, name: "非二跳率" },
              { value: 310, name: "二跳率" }
            ]
          }
        ]
      });
      //   渠道 统计
      myCharts2.setOption({
        title: {
          text: "客单价 13.25",
          left: "center"
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          x: "left",
          data: ["BBC", "天猫", "京东"]
        },
        series: [
          {
            type: "pie",
            radius: "65%",
            center: ["50%", "50%"],
            selectedMode: "single",
            data: [
              {
                label: {
                  normal: {
                    backgroundColor: "#eee",
                    borderColor: "#777",
                    borderWidth: 1,
                    borderRadius: 4,
                    rich: {
                      title: {
                        color: "#eee",
                        align: "center"
                      }
                    }
                  }
                }
              },
              { value: 535, name: "BBC" },
              { value: 510, name: "天猫" },
              { value: 634, name: "京东" }
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      });

      //成交数
      myCharts3.setOption({
        title: {
          text: "成交订单数 53",
          left: "center"
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          x: "left",
          data: ["BBC", "天猫", "京东"]
        },
        series: [
          {
            type: "pie",
            radius: "65%",
            center: ["50%", "50%"],
            selectedMode: "single",
            data: [
              {
                label: {
                  normal: {
                    backgroundColor: "#eee",
                    borderColor: "#777",
                    borderWidth: 1,
                    borderRadius: 4,
                    rich: {
                      title: {
                        color: "#eee",
                        align: "center"
                      }
                    }
                  }
                }
              },
              { value: 535, name: "BBC" },
              { value: 510, name: "天猫" },
              { value: 634, name: "京东" }
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      });

      //   成交转化率
      myCharts4.setOption({
        title: {
          text: "成交转化率 10.70%",
          left: "center"
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },

        series: [
          {
            name: "占比",
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: "center"
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: "20",
                  fontWeight: "bold"
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [{ value: 35, name: "成交转化率" }, { value: 310, name: "" }]
          }
        ]
      });

      //PV
      myCharts5.setOption({
        title: {
          text: "PV 590,1",
          left: "center"
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          x: "left",
          data: ["BBC", "天猫", "京东"]
        },
        series: [
          {
            type: "pie",
            radius: "65%",
            center: ["50%", "50%"],
            selectedMode: "single",
            data: [
              {
                label: {
                  normal: {
                    backgroundColor: "#eee",
                    borderColor: "#777",
                    borderWidth: 1,
                    borderRadius: 4,
                    rich: {
                      title: {
                        color: "#eee",
                        align: "center"
                      }
                    }
                  }
                }
              },
              { value: 535, name: "BBC" },
              { value: 510, name: "天猫" },
              { value: 634, name: "京东" }
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      });

      //UV
      myCharts6.setOption({
        title: {
          text: "UV 187",
          left: "center"
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          x: "left",
          data: ["BBC", "天猫", "京东"]
        },
        series: [
          {
            type: "pie",
            radius: "65%",
            center: ["50%", "50%"],
            selectedMode: "single",
            data: [
              {
                label: {
                  normal: {
                    backgroundColor: "#eee",
                    borderColor: "#777",
                    borderWidth: 1,
                    borderRadius: 4,
                    rich: {
                      title: {
                        color: "#eee",
                        align: "center"
                      }
                    }
                  }
                }
              },
              { value: 535, name: "BBC" },
              { value: 510, name: "天猫" },
              { value: 634, name: "京东" }
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      });

      //经营树状图分析
      myCharts8.setOption({
        tooltip: {},
        xAxis: {
          type: "category",
          axisLine: { onZero: false },
          data: [
            "2019-12-20",
            "2019-12-21",
            "2019-12-22",
            "2019-12-23",
            "2019-12-24",
            "2019-12-25",
            "2019-12-26"
          ]
        },
        yAxis: {
          min: 0,
          max: 1,
          type: "value",
          axisLine: { onZero: false }
        },
        series: [
          {
            id: "a",
            type: "line",
            smooth: true,
            symbolSize: symbolSize,
            data: [0, 0, 0, 0, 0, 0.16, 0.62]
          }
        ]
      });
    }
  },
  mounted() {
    this.queryUserList();
    this.drawBar();
  }
};
</script>

<style scoped>
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #e5e9f2;
}
.bg-purple1 {
  background: #ffffff;
}
.bg-purple-light {
  background: #e5e9f2;
}
.table_div {
  border: 1px solid #e5e9f2;
}
.ul_li_style {
  margin-left: -40px;
  height: 35px;
  line-height: 35px;
  font-size: 14px;
  padding-left: 10px;
  list-style: none;
}
</style>
